<template>
	<view class="settle">
		<!-- 全选区域 -->
		<view class="check">
			<radio :checked="isCheck" color="#c00000" @click="handleClick"></radio><text>全选</text>
		</view>
		<!-- 总计区域 -->
		<view class="total">
			<view>合计:<text>￥{{totalPrice}}</text></view>
		</view>
		<!-- 结算按钮区域 -->
		<view class="btn">
			<view class="btn-item" @click="handleSettle">结算({{checkCart}})</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters,mapMutations,mapState } from 'vuex'
	import '../../main.js'
	export default {
		name:"my-settle",
		data() {
			return {
			  second:3
			};
		},
		methods: {
			...mapMutations('m_cart',['setGoodsState']),
			...mapMutations('m_user',['navRedirecInfo']),
			handleClick() {
				// console.log(!this.isCheck)
				this.setGoodsState(!this.isCheck)
			},
			handleSettle() {
				if(!this.checkCart) return uni.showMsg('请选择要结算的商品')
				
				if(!this.addStr) return uni.showMsg('请选择收货地址!')
				
				if(!this.token) return this.diliverNavigate()
				
				// 当三个校验都通过后，开始创建订单
				this.createOrder()
			},
			async createOrder() {
				// 1.创建订单
				
				// 1.1创建信息
				const orderInfo = {
					order_price: 0.01,
					consignee_addr:this.addStr,
					goods:this.cart.filter(item => item.goods_state).map(x => ({
						goods_id: x.goods_id,
						goods_number: x.goods_count,
						goods_price: x.goods_price
					}))
				}
				// 1.2获取订单详情
				const {data:res} = await uni.$http.post('public/v1/my/orders/create',orderInfo)
				if( res.meta.status !== 200) return uni.showMsg()
				// 获取订单编号
				const orderNumber = res.message.order_number
				
				// 2.获取订单预支付详情
				
				const { data: res2 } = await uni.$http.post('public/v1/my/orders/req_unifiedorder',{order_number:orderNumber})
				if(res2.meta.status !== 200) return uni.showMsg('预付订单生成失败！')
				 // console.log(res2)
				 const payInfo = {
					 "timeStamp": "1525681145",
					 "nonceStr": "BkPggorBXZwPGXe3",
					 "package": "prepay_id=wx071619042918087bb4c1d3d72999385683",
					 "signType": "MD5",
					 "paySign": "D1642DEEF1663C8012EDEB9297E1D516"
				 }
				 // console.log(payInfo)
				 
				 //3.发起微信支付
				 const [err,succ] = await uni.requestPayment({
					"timeStamp": "1525681145",
					"nonceStr": "BkPggorBXZwPGXe3",
					"package": "prepay_id=wx071619042918087bb4c1d3d72999385683",
					"signType": "MD5",
					"paySign": "D1642DEEF1663C8012EDEB9297E1D516"
				 })
				 console.log(err)
				 if(err) return uni.showMsg('订单支付失败！')
				 
				 const {data:res3} = await uni.$http.post('public/v1/my/orders/chkOrder',{order_number:orderNumber})
				 if(res3.meta.status !== 200) return uni.$showMsg('订单未支付！') 
				 
				 uni.showToast({
					 title:'支付成功!',
					 icon:'success',
				 	duration:1500
				 })
				 console.log(res)
			},
			
			diliverNavigate() {
				this.second = 3
				this.showTips(this.second)
				const timer = setInterval(() => {
					this.second--
					this.showTips(this.second)
					if(this.second <= 0){
						clearInterval(timer)
						
						uni.switchTab({
							url:'/pages/my/my',
							success: () => {
								this.navRedirecInfo({
									// 跳转的方式
									openType:'switchTab',
									// 从哪个页面跳转
									from:'pages/cart/cart'
								})
							}
						})
						return
					}
				},1000)
				
			},
			showTips(n) {
				uni.showToast({
					icon:'none',
					title:'即将在' + n + '秒后跳转到登录页面',
					mask:true
				})
			  }
			},
		computed: {
			...mapGetters('m_cart',['checkCart','total','totalPrice']),
			...mapGetters('m_user',['addStr']),
			...mapState('m_user',['token']),
			...mapState('m_cart',['cart']),
			isCheck() {
				return this.total === this.checkCart
			}
		}
	}
</script>

<style lang="scss">
  .settle{
	  z-index: 999;
	  height: 50px;
	  width: 100%;
	  position: fixed;
	  bottom: 0px;
	  background-color: white;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
      align-items: center;
    .total{
		text{
		   color: #c00000;
		   font-size: 16px;
		}
	}
	.btn{
		width: 30%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-color: #c00000;
		color: white;
	}
	  
  }
</style>